<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../static/bm/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../static/bm/css/thesame.css" media="all">
    <link rel="stylesheet" href="../static/bm/bmuserinfo/css/rightCon.css" media="all">
    <link rel="stylesheet" href="../static/bm/bmuserinfo/css/page.css" media="all">
    <link rel="stylesheet" href="../static/bm/bmuserinfo/css/tree.css" media="all">
    <link rel="stylesheet" href="../static/bm/bmuserinfo/css/popCss.css" media="all">
    <link rel="stylesheet" th:href="@{/static/css/footer.css}" media="all"/>
<!--    <link rel="stylesheet" th:href="@{/static/org/css/org.css}" media="all"/>-->
</head>

<body class="layui-layout-body">
<div class="layui-body">
    <!-- 内容主体区域 -->
    <div class="add-title pad25px"><span class="mr10px cursor"><img src="../static/bm/bmuserinfo/img/return_icon.png" class="return"></span><span>老人列表</span></div>
    <div class="new-add-box bgWhite box-shadows border-radius4">
        <div class="new-add-box-scroll">
            <div class="border-bot1px pb20px mb20px">
                <div class="add-mess add-mess-con">
                    <div class="add-mess-child">
                        <div>
                            <label>行政区域：</label>
                        </div>
                        <div id="treeTwo" class="add-mess-form">
                            <p class="add-mess-form-tree"><input autocomplete="off" type="text" placeholder="请选择" class="form-input" id="selectParentOrg"></p>
                            <div class="tree-con-box">
                            </div>
                        </div>
                    </div>
                    <div class="add-mess-child">
                        <div>
                            <label>性别：</label>
                        </div>
                        <div class="add-mess-form">
                            <p>
                                <select class="form-input" id="userSex">
                                    <option value="">请选择</option>
                                    <option value="1">男</option>
                                    <option value="2">女</option>
                                </select>
                            </p>
                        </div>
                    </div>
                    <div class="add-mess-child">
                        <div>
                            <label>姓名：</label>
                        </div>
                        <div class="add-mess-form">
                            <p>
                                <input id="userName" type="text" placeholder="请输入姓名" maxlength="10">
                            </p>
                        </div>
                    </div>
                </div>
                <div class="add-mess-child">
                    <div>
                        <label>年龄段：</label>
                    </div>
                    <div class="add-mess-form">
                        <p>
                            <select class="form-input" id="age">
                                <option value="">请选择</option>
                                <option value="1">65岁以下</option>
                                <option value="2">65-69岁</option>
                                <option value="3">70-79岁</option>
                                <option value="4">80-89岁</option>
                                <option value="5">90-99岁</option>
                                <option value="6">100岁以上</option>
                            </select>
                        </p>
                    </div>
                    <!--<div class="add-mess-child">
                        <div>
                            <label>年龄：</label>
                        </div>
                        <div class="add-mess-form">
                            <p>
                                <input id="age" type="number" oninput="if(value.length>5)value=value.slice(0,4)" placeholder="请输入年龄">
                            </p>
                        </div>
                    </div>-->
                    <div class="overflow">
                        <span class="white border-radius4 bgGreen left pl20px pr20px ml30px lh34px cursor" id="serchBtn">查&nbsp;询</span>
                        <span class="border-radius4 border1px-ddd left pl20px pr20px ml30px lh32px cursor" id="reset">重&nbsp;置</span>
                    </div>
                </div>
                <div style="clear: both"></div>
            </div>
            <div class="mb20px lh32px overflow add-btn-input">
                <div class="layui-btn-group demoTable">
                    <p class="left cursor">
                        <span class="white border-radius4 bgGreen inline-block pl15px pr15px layui-btn" data-type="getCheckData"><img src="../static/bm/bmuserinfo/img/button_add.png">发券</span>
                    </p>
                </div>
                <p class="right">共有<span class="red" id="count"></span>条数据</p>
            </div>
            <div class="border1px border-radius4 relative mb40px">
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>
</div>

<!--弹层-->
<div id="pop-con" style="display:none;">
    <div class="pop-up">
        <div>
            <div class="pop-title relative overflow mb15px">
                <span class="ml15px">发放优惠券</span>
                <p class="right cursor"><img src="../static/bm/bmuserinfo/img/close_icon.png" class="block pop-close"></p>
            </div>
            <div class="pop-form mt30px mb30px">
                <div class="layui-form-item lh32px">
                    <label class="left">发放数量：</label>
                    <span class="left" style="width: 300px;">
								<input type="number" id="coupons" oninput="if(value.length>5)value=value.slice(0,5)" placeholder="请输入数量" class="layui-input">
							</span>
                    <label class="right">张/人/年</label>
                </div>
            </div>
            <div class="btn-con textCenter">
                <span class="btn-one cursor pop-close">取&nbsp;消</span>
                <span class="btn-two cursor" id="fix" onclick="addBmUserinfo()">确&nbsp;定</span>
            </div>
        </div>
    </div>
</div>

<script src="../static/bm/js/jquery-2.1.3.min.js"></script>
<script src="../static/bm/layui/layui.js" charset="utf-8"></script>
<script src="../static/bm/bmuserinfo/js/treeTwo.js"></script>
<script type="text/javascript" src="../static/bm/bmuserinfo/js/treeTwo.js" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/js/layuiCon.js}" charset="utf-8"></script>

<script th:inline="javascript">

    var type = [[${type}]]

    var ids = "";


    $(function () {
        getData();

        $("#serchBtn").click(function () {
            getData();
        });

        $("#reset").click(function () {
            $("#selectParentOrg").val("");
            $("#userName").val("");
            $("#userSex").val("");
            $("#age").val("");
            getData();
        })

        $(".return").click(function () {
            if (type == "1") {
                window.location.href = "../bmuserinfo/toHaircutInfoPage";
            } else if (type == "2") {
                window.location.href = "../bmuserinfo/toSewingInfoPage";
            }
        });

        //添加初始化
        addOrgInit();
    });

    function getData() {
        layui.use(['element', 'table', 'layer'], function () {
            var element = layui.element;
            var table = layui.table;
            var layer = layui.layer;
            var userName = $("#userName").val();
            var userSex = $("#userSex").val();
            var age = $("#age").val();
            var orgId = $("#selectParentOrg").data("orgid");
            //第一个实例
            table.render({
                elem: '#test'//,url: '/demo/table/user/'
                , url: "../bmuserinfo/getBmUserInfoPageList"
                , where: {age: age, userName: userName, userSex: userSex, orgId: orgId, type: type}
                // , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                // , toolbar: true
                // , defaultToolbar: []
                , request: {
                    pageName: 'currentPage' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                //,count: 10  //数据总数，从服务端得到
                //,data: listData
                , page: true //开启分页
                , limit: 10 //每页显示的条数
                //,limits:[3,4,5]
                , groups: 9 //连续页码个数
                , parseData: function (res) {
                    console.log(res);
                    return {
                        "code": res.code,
                        "data": res.data.data,
                        "count": res.data.totalCount,
                        "limit": res.data.pageSize,
                    };
                },
                cols: [
                    [ //表头
                        {
                            type: 'checkbox',
                            fixed: 'left'
                        }, {
                        field: 'id',
                        title: '序号',
                        type: 'numbers',
                    }, {
                        field: 'userName',
                        title: '姓名',
                    }, {
                        field: 'householdRegister',
                        title: '户籍类型',
                    }, {
                        field: 'belongOrganization',
                        title: '管辖机构',
                    }, {
                        field: 'userSex',
                        title: '性别',
                    }, {
                        field: 'age',
                        title: '年龄',
                    }, {
                        field: 'socialSecurityType',
                        title: '社保类型',
                    }, {
                        field: 'pensionStatus',
                        title: '养老状况',
                    }
                    ]
                ], done: function (res, curr, count) {
                    $("#count").text(count);
                }
            });
            //监听表格复选框选择
            table.on('checkbox(test)', function (obj) {
                console.log(obj)
            });

            layui.$, active = {
                getCheckData: function () { //跳转添加老人页
                    var checkboxValue = ""
                    var checkStatus = table.checkStatus('test')
                        , data = checkStatus.data;
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            checkboxValue += data[i].userNo + ",";
                        }
                        //弹层
                        layerOpen();
                        ids = "";
                        ids = checkboxValue.slice(0, checkboxValue.length - 1);
                    } else {
                        layer.msg("请选择老人");
                    }
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });
    }

    //添加优惠老人信息
    function addBmUserinfo() {
        var coupons = $("#coupons").val();
        if (isNull(coupons)) {
            layer.msg("请输入数量");
            return;
        }
        var data = {ids: ids, type: type, coupons: coupons};
        layer.closeAll();
        $.ajax({
            url: "../bmuserinfo/addBmUserinfo",
            type: "post",
            async: false,
            dataType: "json",
            data: data,
            success: function (result) {
                if (result.code == 200) {
                    if (type == 1) {
                        layer.alert(result.msg, function () {
                            window.location.href = "../bmuserinfo/toHaircutInfoPage"
                        })
                    } else if (type == 2) {
                        layer.alert(result.msg, function () {
                            window.location.href = "../bmuserinfo/toSewingInfoPage"
                        })
                    }
                } else {
                    layer.msg(result.msg);
                }
            }
        });
    }

    //弹层
    function layerOpen() {
        layer.open({
            type: 1,
            title: false, //不显示标题栏
            closeBtn: false,
            area: ['500px', ''],
            shade: 0.6,
            id: 'payCons', //设定一个id，防止重复弹出
            /*,btn: ['确认支付']*/
            btnAlign: 'c',
            moveType: 1, //拖拽模式，0或者1
            shadeClose: true, //设置允许点遮罩关闭
            content: $("div#pop-con"),
            success: function () {
                //关闭弹层
                $(".pop-close").click(function () {
                    layer.closeAll();
                });
            },

        });
    }


    /**
     * 添加组织弹层初始化
     */
    function addOrgInit() {
        var data = {type: 3};
        $.ajax({
            type: "get",
            url: "../bmuserinfo/getOrganization",
            data: data,
            dataType: "json",
            success: function (data) {
                var str = "";
                $.each(data.data.children, function (index, ao) {
                    str += '<div onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="' + ao.orgId + '" class="border-bot1px pl20px pr20px lh45px gray"><span class="mr10px">' + ao.orgName + '</span><span>无上级组织</span></div>';
                    if (ao.isChildExist == '1' && data.data.children != null && data.data.children.length > 0) {
                        str += '<ul class="tree-one">';
                        $.each(ao.children, function (index, ao1) {
                            str += '<li>';
                            str += '<div class="tree-children">';
                            str += '<div>';
                            if (ao1.isChildExist == '1') {
                                str += '<p class="tree-arrow cursor"><img src="../static/org/img/icon_select_down.png"></p>';
                                str += '<p onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="' + ao1.orgId + '">' + ao1.orgName + '</p>';
                            } else {
                                str += '<p style="margin-left:17px" onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="' + ao1.orgId + '">' + ao1.orgName + '</p>';
                            }
                            str += '</div>';
                            str += '</div>';
                            if (ao1.isChildExist == '1' && ao.children != null && ao.children.length > 0) {
                                str += '<ul class="tree-two">';
                                $.each(ao1.children, function (index, ao2) {
                                    str += '<li>';
                                    str += '<div class="tree-children">';
                                    str += '<div>';
                                    if (ao2.isChildExist == '1') {
                                        str += '<p class="tree-arrow cursor"><img src="../static/org/img/icon_select_down.png"></p>';
                                        str += '<p onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="' + ao2.orgId + '">' + ao2.orgName + '</p>';
                                    } else {
                                        str += '<p style="margin-left:8px" onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="' + ao2.orgId + '">' + ao2.orgName + '</p>';
                                    }
                                    str += '</div>'
                                    str += '</div>';
                                    if (ao2.isChildExist == '1' && ao2.children != null && ao2.children.length > 0) {
                                        str += '<ul class="tree-three">';
                                        $.each(ao2.children, function (index, ao3) {
                                            str += '<li>';
                                            str += '<div class="tree-children">';
                                            str += '<div>';
                                            if (ao3.isChildExist == '1') {
                                                str += '<p class="tree-arrow cursor"><img src="../static/org/img/icon_select_down.png"></p>';
                                                str += '<p onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="' + ao3.orgId + '">' + ao3.orgName + '</p>';
                                            } else {
                                                str += '<p style="margin-left:8px" onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="' + ao3.orgId + '">' + ao3.orgName + '</p>';
                                            }
                                            str += '</div>'
                                            str += '</div>';
                                            if (ao3.isChildExist == '1' && ao3.children != null && ao3.children.length > 0) {
                                                str += '<ul class="tree-four">';
                                                $.each(ao3.children, function (index, ao4) {
                                                    str += '<li>';
                                                    str += '<div class="tree-children">';
                                                    str += '<div>';
                                                    str += '<p style="margin-left:8px" onclick="addOrgSelect(this);event.cancelBubble =true" data-orgid="' + ao4.orgId + '">' + ao4.orgName + '</p>';
                                                    str += '</div>'
                                                    str += '</div>';
                                                    str += '</li>';
                                                })
                                                str += '</ul>'
                                            }
                                            str += '</li>';
                                        })
                                        str += '</ul>';
                                    }
                                    str += '</li>';
                                })
                                str += '</ul>';
                            }
                            str += '</li>';
                        });
                        str += '</ul>';
                    }
                    str += '';
                });
                $("#treeTwo .tree-con-box").html(str);
                $("#treeTwo .tree-con-box").hide();
                treeTwoInit();
            }
        })
    }

    /**
     * 添加选择机构-机构
     */
    function addOrgSelect(obj) {
        var name = $(obj).html();
        var orgId = $(obj).data("orgid");
        if (orgId == 10) {
            name = "/";
        }
        $("#selectParentOrg").val(name);
        $("#selectParentOrg").data("orgid", orgId);
        $('#treeTwo .tree-con-box').hide();
    }

    function isNull(value) {
        return value == null || value === "" || value === undefined;
    }
</script>
</body>

</html>
